
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 Generator</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Easily generate cross browser CSS3 syntax. CSS3 Generator by @RandyJensen">
<meta name="keywords" content="css3, html5, web, development, design, coding">
<meta name="robot" content="index,follow">
<meta name="author" content="Randy Jensen">

<meta property="og:image" content="icon.png"/>
<meta property="og:title" content="CSS3 Generator"/>
<meta property="og:url" content="http://idblack-monkey.blogspot.com/"/>

<link rel="stylesheet" href="main.css?19158" type="text/css" media="screen" /> 
<link rel="stylesheet" href="grid.css?19158" type="text/css" media="screen" /> 
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" />
<link rel="shortcut icon" href="icon.png" type="image/x-icon" />
</head>
<body>
<div class="tooltip">&nbsp;</div><div class="tooltipInputs">&nbsp;</div>

<div id="topBar"></div>

<div class="container_12 clearfix">

<h1>CSS3 Generator</h1>

<!--<div class="grid_1">&nbsp;</div>-->

<div class="grid_10">

<select name="choose_property" id="chooseProperty">
<option value="choose-something">Choose Something</option>
<option value="border-radius">Border Radius</option>
<option value="box-shadow">Box Shadow</option>
<option value="text-shadow">Text Shadow</option>
<option value="rgba">RGBA</option>
<option value="font-face">@Font Face</option>
<option value="multiple-columns">Multiple Columns</option>
<option value="box-resize">Box Resize</option>
<option value="box-sizing">Box Sizing</option>
<option value="outline">Outline</option>
<option value="transition">Transitions</option>
<option value="transform">Transform</option>
<option value="selectors">Selectors</option>
<option value="gradients">Gradients</option>
</select>

<div class="whatsGoingOn whatBorderRadius">
	<p>Are your borders going to be rounded equally?</p> <div class="bordersEqualYes">Yes</div> <div class="bordersEqualNo">No</div>
</div>

<div class="whatsGoingOn bordersEqualYesInput">
	<label>Border Radius:</label> <input name="border-radius-input" type="text" size="2" class="borderRadiusInputEqual" /><span class="pixel">px</span><br />
    <div class="yourCode">
    <h3>Your Code</h3>
    <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="4.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.1+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
	<div class="theCode">
    -webkit-border-radius: <span class="code-border-radius-equal"></span>;<br />
    <!---moz-border-radius: <span class="code-border-radius-equal"></span>;<br />-->
    border-radius: <span class="code-border-radius-equal"></span>;
    </div>
    <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn bordersEqualYesInput">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn bordersEqualNoInput">
	<label>Top Left:</label> <input name="border-radius-input-tl" type="text" size="2" class="borderRadiusInputNotEqualTL" /><span class="pixel">px</span><br />
	<label>Top Right:</label> <input name="border-radius-input-tr" type="text" size="2" class="borderRadiusInputNotEqualTR" /><span class="pixel">px</span><br />
	<label>Bottom Right:</label> <input name="border-radius-input-br" type="text" size="2" class="borderRadiusInputNotEqualBR" /><span class="pixel">px</span><br />
	<label>Bottom Left:</label> <input name="border-radius-input-bl" type="text" size="2" class="borderRadiusInputNotEqualBL" /><span class="pixel">px</span>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="4.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="6.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="5+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
        <div class="theCode">
        <!---moz-border-radius-topleft: <span class="code-border-radius-not-equal-tl"></span>px;<br />
        -moz-border-radius-topright: <span class="code-border-radius-not-equal-tr"></span>px;<br />
        -moz-border-radius-bottomright: <span class="code-border-radius-not-equal-br"></span>px;<br />
        -moz-border-radius-bottomleft: <span class="code-border-radius-not-equal-bl"></span>px;<br />-->
        -webkit-border-radius: <span class="code-border-radius-not-equal-tl"></span>px <span class="code-border-radius-not-equal-tr"></span>px <span class="code-border-radius-not-equal-br"></span>px <span class="code-border-radius-not-equal-bl"></span>px;<br />
        border-radius: <span class="code-border-radius-not-equal-tl"></span>px <span class="code-border-radius-not-equal-tr"></span>px <span class="code-border-radius-not-equal-br"></span>px <span class="code-border-radius-not-equal-bl"></span>px;
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn bordersEqualNoInput">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatBoxShadow">
	<label>Inset:</label> <select name="box-shadow-inset" id="boxShadowInset">
    <option value="">No</option>
    <option value="inset">Inset</option>
    </select><br />
	<label>Horizontal Length:</label> <input name="box-shadow-horizontal" type="text" size="2" class="boxShadowHorizontal" /><span class="pixel">px</span><br />
	<label>Vertical Length:</label> <input name="box-shadow-vertical" type="text" size="2" class="boxShadowVertical" /><span class="pixel">px</span><br />
	<label>Blur Radius:</label> <input name="box-shadow-blur" type="text" size="2" class="boxShadowBlur" /><span class="pixel">px</span><br />
    <label>Spread:</label> <input name="box-shadow-spread" type="text" size="2" class="boxShadowSpread" /><span class="pixel">px</span><br />
    <label>Shadow Color:</label> <select name="box-shadow-color-select" id="boxShadowColorSelect" /><option value="rgba">RGBA</option>
    <option value="hex">Hex</option>
    </select><br />
    <label class="box-shadow-hex">Hex: </label><span class="hex box-shadow-hex">#</span><input name="box-shadow-hex" type="text" size="4" class="hexBoxShadow box-shadow-hex" maxlength="6" />
    <label class="box-shadow-rgba-r box-shadow-rgba">R: </label><input name="box-shadow-rgba-r" type="text" size="2" class="rgbaRBoxShadow box-shadow-rgba" maxlength="3" /><br />
	<label class="box-shadow-rgba-g box-shadow-rgba">G: </label><input name="box-shadow-rgba-g" type="text" size="2" class="rgbaGBoxShadow box-shadow-rgba" maxlength="3" /><br />
	<label class="box-shadow-rgba-b box-shadow-rgba">B: </label><input name="box-shadow-rgba-b" type="text" size="2" class="rgbaBBoxShadow box-shadow-rgba" maxlength="3" /><br />
	<label class="box-shadow-rgba-opacity box-shadow-rgba">Opacity: </label><input name="box-shadow-rgba-opacity" type="text" size="2" class="rgbaOpacityBoxShadow box-shadow-rgba" title="Enter a value between 0.1 and 1" />
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="4.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.1+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
        <div class="theCode">
        -webkit-box-shadow: <span class="box-shadow-inset"></span> <span class="box-shadow-horizontal"></span> <span class="box-shadow-vertical"></span> <span class="box-shadow-blur"></span> <span class="box-shadow-spread"></span> <span class="box-shadow-color"></span><span class="box-shadow-color-r"></span><span class="box-shadow-color-g"></span><span class="box-shadow-color-b"></span><span class="box-shadow-color-a"></span>;<br />
        <!---moz-box-shadow: <span class="box-shadow-inset"></span> <span class="box-shadow-horizontal"></span> <span class="box-shadow-vertical"></span> <span class="box-shadow-blur"></span> <span class="box-shadow-spread"></span> <span class="box-shadow-color"></span><span class="box-shadow-color-r"></span><span class="box-shadow-color-g"></span><span class="box-shadow-color-b"></span><span class="box-shadow-color-a"></span>;<br />-->
        box-shadow: <span class="box-shadow-inset"></span> <span class="box-shadow-horizontal"></span> <span class="box-shadow-vertical"></span> <span class="box-shadow-blur"></span> <span class="box-shadow-spread"></span> <span class="box-shadow-color"></span><span class="box-shadow-color-r"></span><span class="box-shadow-color-g"></span><span class="box-shadow-color-b"></span><span class="box-shadow-color-a"></span>;
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatBoxShadow">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatTextShadow">
    <label>Horizontal Length:</label> <input name="text-shadow-horizontal" type="text" size="2" class="textShadowHorizontal" /><span class="pixel">px</span><br />
	<label>Vertical Length:</label> <input name="text-shadow-horizontal" type="text" size="2" class="textShadowVertical" /><span class="pixel">px</span><br />
	<label>Blur Radius:</label> <input name="text-shadow-horizontal" type="text" size="2" class="textShadowBlur" /><span class="pixel">px</span><br />
	<label>Shadow Color:</label> <input name="text-shadow-horizontal" type="text" size="4" class="textShadowColor" />
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="3.5+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="4.0+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="9.6+" class="browserTooltip" /></div>
        <div class="theCode">
        text-shadow: <span class="text-shadow-horizontal"></span>px <span class="text-shadow-vertical"></span>px <span class="text-shadow-blur"></span>px #<span class="text-shadow-color"></span>;<br />
        filter: dropshadow(color=#<span class="text-shadow-color"></span>, offx=<span class="text-shadow-horizontal"></span>, offy=<span class="text-shadow-vertical"></span>);
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatTextShadow">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatRGBA">
	<label>R:</label> <input name="rgba-r" type="text" size="2" class="rgbaR" /><br />
	<label>G:</label> <input name="rgba-g" type="text" size="2" class="rgbaG" /><br />
	<label>B:</label> <input name="rgba-b" type="text" size="2" class="rgbaB" /><br />
	<label>Opacity:</label> <input name="rgba-opacity" type="text" size="2" class="rgbaOpacity" title="Enter a value between 0.1 and 1" />
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="3.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.1+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.0+" class="browserTooltip" /></div>
        <div class="theCode">
        <p>background-color: rgba(<span class="rgba-r"></span>, <span class="rgba-g"></span>, <span class="rgba-b"></span>, <span class="rgba-opacity"></span>);</p>
        <p>&nbsp;</p>
        <p>color: rgba(<span class="rgba-r"></span>, <span class="rgba-g"></span>, <span class="rgba-b"></span>, <span class="rgba-opacity"></span>);</p>
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatRGBA">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatFontFace">
	<label>Font Family:</label> <input name="font-family" type="text" size="10" class="fontFamily" /><br />
    <label>Font Name:</label> <input name="font-name" type="text" size="10" class="fontName" />
    </select>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="3.5+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.2+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.1+" class="browserTooltip" /></div>
        <div class="theCode">
        @font-face {<br />
            font-family: '<span class="font-family"></span>';<br />
            src: url('<span class="font-name"></span>.eot?') format('eot'),<br />
            url('<span class="font-name"></span>.woff') format('woff'),<br />
            url('<span class="font-name"></span>.ttf') format('truetype');<br />
        }
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
    <p class="sidenote" style="text-align: center;">Based off FontSpring's <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">New Bulletproof @Font-Face Syntax</a>.</p>
</div>

<div class="whatsGoingOn whatFontFace">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span><div>Nothing to see here, move along</div></div>
    </div>
</div>

<div class="whatsGoingOn whatMultipleColumns">
	<label># of Columns:</label> <input name="multiple-columns-number" type="text" size="2" class="multipleColumnsNumber" /><br />
	<label>Column Gap:</label> <input name="multiple-columns-gap" type="text" size="2" class="multipleColumnsGap" /><span class="pixel">px</span>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="opera_thumb.png" alt="Opera" title="11.6" class="browserTooltip" /></div>
        <div class="theCode">
        -moz-column-count: <span class="multiple-columns-number"></span>;<br />
        -moz-column-gap: <span class="multiple-columns-gap"></span>px;<br />
        -webkit-column-count: <span class="multiple-columns-number"></span>;<br />
        -webkit-column-gap: <span class="multiple-columns-gap"></span>px;<br />
        column-count: <span class="multiple-columns-number"></span>;<br />
		column-gap: <span class="multiple-columns-gap"></span>px;
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatMultipleColumns">
	<div class="yourPreview">
    	<div class="previewWindow" style="text-align:left; padding:10px; width:300px; height: 230px;"><p style="font-size:0.5em;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
    </div>
</div>

<div class="whatsGoingOn whatBoxResize">
	<label>Resize:</label> <select name="box-resize" id="chooseBoxResize">
    <option value="box-resize-options">Choose</option>
    <option value="horizontal">Horizontal</option>
    <option value="vertical">Vertical</option>
    <option value="both">Both</option>
    </select>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.1+" class="browserTooltip" /></div>
        <div class="theCode">
        resize: <span class="box-resize"></span>;<br />
        overflow: auto;<br />
        min-width: 50px; <span style="font-size:12px;">/*suggest a mid-width &amp; min-height*/</span><br />
        min-height 50px;
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatBoxResize">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatBoxSizing">
	<label>Sizing Option:</label> <select name="box-sizing" id="chooseBoxSizing">
    <option value="box-sizing-options">Choose</option>
    <option value="border-box">Border Box</option>
    <option value="content-box">Content Box</option>
    </select>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="1.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="0.2+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="8+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="7" class="browserTooltip" /></div>
        <div class="theCode">
        -moz-box-sizing: <span class="box-sizing"></span>;<br />
        -webkit-box-sizing: <span class="box-sizing"></span>;<br />
        box-sizing: <span class="box-sizing"></span>;
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatBoxSizing">
	<div class="yourPreview">
    	<div class="previewWindow" style="padding:10px; width:300px; height: 230px;"><span>Preview Area</span>
        	<div class="boxResizeExamples">If you set this to content-box, it will act like the box model we all know and love from CSS2.1</div>
			<div class="boxResizeExamples">If you set it to border-box, the padding and border will render inside the box.</div>
        </div>
    </div>
</div>

<div class="whatsGoingOn whatOutline">
	<label>Outline Thickness:</label> <input name="outline-thickness" type="text" size="2" class="outlineThickness" /><span class="pixel">px</span><br />
	<label>Outline Style:</label> <select name="outline-style" id="outlineStyle">
    <option value="outline-style-options">Choose</option>
    <option value="inherit">Inherit</option>
    <option value="dotted">Dotted</option>
    <option value="dashed">Dashed</option>
    <option value="solid">Solid</option>
    <option value="groove">Groove</option>
    <option value="ridge">Ridge</option>
    <option value="inset">Inset</option>
    <option value="outset">Outset</option>
    <option value="double">Double</option>
    <option value="auto">Auto</option>
    </select><br />
	<label>Outline Color:</label> <input name="outline-color" type="text" size="4" class="outlineColor" />
	<div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="3.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="4.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.1+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
        <div class="theCode">
        outline: <span class="outline-thickness"></span>px <span class="outline-style"></span> #<span class="outline-color"></span>;<br />
        outline-offset: 10px; <span style="font-size:12px;">/*Delete if you don't want an offset*/</span>
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatOutline">
	<div class="yourPreview">
    	<div class="previewWindow" style="padding:10px; width:300px; height: 230px;"><span>Preview Area</span>
			<div class="outlineExample">You should see a white border around this box in addition to your outline.</div>
        </div>
    </div>
</div>

<div class="whatsGoingOn whatTransition">
	<label>Property:</label> <select name="transition-property" id="transitionProperty">
    <option value="all">All</option>
    <option value="background">Background</option>
    <option value="color">Color</option>
    <option value="height">Height</option>
    <option value="weight">Weight</option>
    <option value="outline">Outline</option>
    </select><br />
    <label>Duration:</label> <input name="transition-duration" type="text" size="4" class="transitionDuration" />
    <select name="transition-duration-type" id="durationType">
    <option value="duration-type-options">Choose</option>
    <option value="s">Seconds</option>
    <option value="ms">Milliseconds</option>
    </select><br />
	<label>Function:</label> <select name="timing-function" id="transitionFunction">
    <option value="transition-function">Choose</option>
    <option value="ease">Ease</option>
    <option value="linear">Linear</option>
    <option value="ease-in">Ease-In</option>
    <option value="ease-out">Ease-Out</option>
    <option value="ease-in-out">Ease-In-Out</option>
    </select><br />
	<div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="4.0+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="3.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.2+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
        <div class="theCode">
        -webkit-transition: <span class="transition-property">all</span> <span class="transition-duration"></span><span class="transition-duration-type"></span> <span class="transition-function"></span>;<br />
		-moz-transition: <span class="transition-property">all</span> <span class="transition-duration"></span><span class="transition-duration-type"></span> <span class="transition-function"></span>;<br />
        -ms-transition: <span class="transition-property">all</span> <span class="transition-duration"></span><span class="transition-duration-type"></span> <span class="transition-function"></span>;<br />
        -o-transition: <span class="transition-property">all</span> <span class="transition-duration"></span><span class="transition-duration-type"></span> <span class="transition-function"></span>;<br />
		transition: <span class="transition-property">all</span> <span class="transition-duration"></span><span class="transition-duration-type"></span> <span class="transition-function"></span>;<br />
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatTransition">
	<div class="yourPreview">
    	<div class="previewWindow" style="padding:10px; width:300px; height: 230px;"><span>Preview Area</span>
			<div class="transitionExample">Hover over here when you're done.</div>
        </div>
    </div>
</div>

<div class="whatsGoingOn whatTransform">
	<label>Scale:</label> <input name="scale" type="text" size="2" class="transformScale" title="Try something between 0.1 &amp; 2" /><br />
	<label>Rotate:</label> <input name="rotate" type="text" size="2" class="transformRotate" title="How many degrees to rotate" /><span class="pixel">deg</span><br />
	<label>Translate:</label> <input name="translate1" type="text" size="2" class="transformTranslate1" title="Pixels to move the X axis" /><span class="pixel" style="margin-right:6px;">px</span> <input name="translate2" type="text" size="2" class="transformTranslate2" title="Pixels to move the Y axis" /><span class="pixel">px</span><br />
	<label>Skew:</label> <input name="skew1" type="text" size="2" class="transformSkew1" title="Degrees to skew the X axis" /><span class="pixel">deg</span> <input name="skew2" type="text" size="2" class="transformSkew2" title="Degrees to skew the Y axis" /><span class="pixel">deg</span>
    <div class="yourCode">
        <h3>Your Code</h3>
        <div class="browserSupport"><img src="firefox_thumb.png" alt="Firefox" title="3.5+" class="browserTooltip" /><img src="chrome_thumb.png" alt="Chrome" title="3.0+" class="browserTooltip" /><img src="safari_thumb.png" alt="Safari" title="3.2+" class="browserTooltip" /><img src="ie_thumb.png" alt="Internet Explorer" title="9+" class="browserTooltip" /><img src="opera_thumb.png" alt="Opera" title="10.5+" class="browserTooltip" /></div>
        <div class="theCode">
        -moz-transform: scale(<span class="transform-scale"></span>) rotate(<span class="transform-rotate"></span>deg) translateX(<span class="transform-translate1">0</span>px) translateY(<span class="transform-translate2">0</span>px) skewX(<span class="transform-skew1">0</span>deg) skewY(<span class="transform-skew2">0</span>deg);<br />
		-webkit-transform: scale(<span class="transform-scale"></span>) rotate(<span class="transform-rotate"></span>deg) translateX(<span class="transform-translate1">0</span>px) translateY(<span class="transform-translate2">0</span>px) skewX(<span class="transform-skew1">0</span>deg) skewY(<span class="transform-skew2">0</span>deg);<br />
        -o-transform: scale(<span class="transform-scale"></span>) rotate(<span class="transform-rotate"></span>deg) translateX(<span class="transform-translate1">0</span>px) translateY(<span class="transform-translate2">0</span>px) skewX(<span class="transform-skew1">0</span>deg) skewY(<span class="transform-skew2">0</span>deg);<br />
        -ms-transform: scale(<span class="transform-scale"></span>) rotate(<span class="transform-rotate"></span>deg) translateX(<span class="transform-translate1">0</span>px) translateY(<span class="transform-translate2">0</span>px) skewX(<span class="transform-skew1">0</span>deg) skewY(<span class="transform-skew2">0</span>deg);<br />
        transform: scale(<span class="transform-scale"></span>) rotate(<span class="transform-rotate"></span>deg) translateX(<span class="transform-translate1">0</span>px) translateY(<span class="transform-translate2">0</span>px) skewX(<span class="transform-skew1">0</span>deg) skewY(<span class="transform-skew2">0</span>deg);
        </div>
        <div class="d_clip_button">Copy To Clipboard</div>
    </div>
</div>

<div class="whatsGoingOn whatTransform">
	<div class="yourPreview">
    	<div class="previewWindow"><span>Preview Area</span></div>
    </div>
</div>

<div class="whatsGoingOn whatSelectors">
    Selectors are incredibly amazing, but beyond the scope of this project. If you want a great article that explains them, view <a href="http://www.456bereastreet.com/archive/200601/css_3_selectors_explained">456 Berea St's CSS3 Selectors Explained</a>.
</div>

<div class="whatsGoingOn whatGradients">
    I was going to write a gradient generator but came across a great one that was already written. <a href="http://www.colorzilla.com/gradient-editor/">Ultimate CSS Gradient Generator</a> 
</div>

</div> <!-- close grid_10 //!-->

<!--<div class="grid_1">&nbsp;</div>-->

</div> <!-- close container_12 //!-->

<div id="footer-area" class="container_12">
    <div id="footer"><a href="http://www.randyjensen.com">Randy Jensen</a><!-- - <a href="http://www.twitter.com/randyjensen">@randyjensen</a>--></div>
</div>

<div id="topBarFake" style="position:fixed;bottom:0;"></div>

<script type="text/javascript" src="colorpicker/js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript" src="main-min.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="colorpicker/js/eye.js"></script>
<script type="text/javascript" src="colorpicker/js/utils.js"></script>
<script type="text/javascript" src="colorpicker/js/layout.js?ver=1.0.2"></script>
<script type="text/javascript" src="colorpicker/js/ZeroClipboard.js"></script>
<script>
$(".d_clip_button").live('mouseover', function() {
    var x = $(this);
    ZeroClipboard.setMoviePath( 'http://css3generator.com/scripts/ZeroClipboard10.swf' );
    clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    $("body").mousemove(function(event) {
        clip.setText(x.parent().children('.theCode').text().trim());
    });

    var width = $(this).width();
    var height =  $(this).height()+10;
    var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>';
    flash_movie = $(flash_movie).css({
        position: 'absolute',
        marginBottom: 0,
        right: 0,
        bottom: 0,
        width: width,
        height: height,
        zIndex: 101
    })
    .click(function() {
        $(this).next('div').indicator({className: 'copied', wrapTag: 'div', text: 'Copied!', fadeOut: 'slow', display: 'after'});
    });

    clip.addEventListener( 'complete', function(client, text) {
        $('.d_clip_button').addClass('checkmark').delay(2000).queue(function(next){
            $(this).removeClass('checkmark');
            next();
        });
    });

    $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop
});
</script>
</body>
</html>